<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Drag demo</title>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/6.0.2/cash.min.js"></script>-->\
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
    .item {
      width: 100px;
      height: 100px;
      display: inline-block;
      margin: 10px;
      color: #2c3e50;
      text-align: center;
      background-color: #18bc9c;
    }
    .item.jq {
      background-color: #4078b8;
    }
  </style>
</head>

<body>
  <div class="container-fluid">
    <h1>Drag demo</h1>
    <br><br>
    <div class="item jq"> Manual </div>
    <div class="item" draggable="true"> HTML5 D&D </div>
  </div>

  <script type="text/javascript">
    $(function () {
      $.fn.drags = function (opt) {

        opt = $.extend({
          handle: "",
          cursor: "move"
        }, opt);

        if (opt.handle === "") {
          var $el = this;
        } else {
          var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
          if (opt.handle === "") {
            var $drag = $(this).addClass('draggable');
          } else {
            var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
          }
          var z_idx = $drag.css('z-index'),
            drg_h = $drag.outerHeight(),
            drg_w = $drag.outerWidth(),
            pos_y = $drag.offset().top + drg_h - e.pageY,
            pos_x = $drag.offset().left + drg_w - e.pageX;
          $drag.css('z-index', 1000).parents().on("mousemove", function (e) {
            $('.draggable').offset({
              top: e.pageY + pos_y - drg_h,
              left: e.pageX + pos_x - drg_w
            }).on("mouseup", function () {
              $(this).removeClass('draggable').css('z-index', z_idx);
            });
          });
          e.preventDefault(); // disable selection
        }).on("mouseup", function () {
          if (opt.handle === "") {
            $(this).removeClass('draggable');
          } else {
            $(this).removeClass('active-handle').parent().removeClass('draggable');
          }
        });

      }

      $('.item.jq').drags();
    });

  </script>
</body>

</html>